<template>
    <div
        class="absolute w-full h-full top-0 left-0 flex justify-center items-center bg-[rgba(0,0,0,0.4)] backdrop-blur-sm select-none">
        <div class="box relative w-[60rem] h-[42rem]">
            <!-- 商店标题 -->
            <div>
                <p class="absolute font-serif top-7 left-[29rem] text-amber-500 font-bold text-3xl tracking-widest">
                    商店
                </p>
                <button @click="emit(`showName`)"
                    class="absolute top-[3.8rem] left-[50rem] flex h-8 w-8 items-center justify-center rounded-full bg-orange-300 text-white hover:scale-110 transition-all shadow-[inset_0px_-4px_4px_0px_#f05b5b,0px_0px_0px_2px_#f9d1d1,0px_4px_0px_0px_#A60000]">
                    <svg t="1724252642050" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="43079" width="20" height="20">
                        <path
                            d="M773.41 196.21c15.05-15.01 39.41-14.98 54.42 0.07 14.07 14.11 15.05 36.63 2.24 51.9l-2.25 2.44-577.2 577.2c-15.05 15.01-39.41 14.98-54.42-0.07-14.07-14.11-15.05-36.63-2.24-51.9l2.25-2.44 577.2-577.2z"
                            p-id="43080" fill="#ffffff"></path>
                        <path
                            d="M196.21 196.21c14.12-14.12 36.68-15.09 51.97-2.25l2.44 2.25 577.2 577.2c15.01 15.05 14.98 39.41-0.07 54.42-14.11 14.07-36.63 15.05-51.9 2.24l-2.44-2.25-577.2-577.2c-15.03-15.03-15.03-39.39 0-54.41z"
                            p-id="43081" fill="#ffffff"></path>
                    </svg>
                </button>
            </div>
            <div class="w-[45rem] h-[27.8rem] absolute top-[7.5rem] flex left-[7.4rem]">
                <!-- 左侧商品类型 -->
                <div class="min-w-48 pl-5 pt-2">
                    <ul class="flex flex-col gap-3 font-serif font-bold letf_menu">
                        <li @click="index = 0" :class="index == 0 ? `w-[90%]` : `w-[65%]`"
                            class="relative opacity-90 hover:opacity-100 h-12 rounded-sm flex items-center p-2 hover:cursor-pointer hover:scale-105 transition-all">
                            <img src="../assets/imgs/btn.png" class="absolute -z-10 w-full h-full left-0">
                            <svg t="1724326437963" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="12651" width="25" height="25">
                                <path
                                    d="M194.286011 752.411624c-44.78153 82.32702-20.752416 108.813657 29.490276 131.887068l294.629702 131.887068c50.242692 23.07341 121.37433-8.055214 147.314851-52.76848L989.840817 409.587166l-530.347115 474.779791c-39.661691 31.401683-107.311838 9.079182-147.314851-26.418373l-117.89284-105.53696z"
                                    fill="#FF6500" p-id="12652"></path>
                                <path
                                    d="M989.704288 307.736491V108.813657C989.704288 56.932616 925.126045 0 865.599377 0H679.373745C606.876817 0 544.20998 34.132264 522.774919 53.109803L64.037292 458.737626c-42.050949 36.658051-38.705987 90.587028 3.413227 127.24508l234.488653 207.319371c42.119214 36.726316 149.977167 33.244825 192.164645-3.413227l463.516143-409.928489c21.844649-18.431422 33.586148-44.986324 32.084328-72.22387z m-279.338447-56.659558a69.493289 69.493289 0 0 1-24.506966-52.358893c0-19.796713 8.874389-38.842516 24.506966-52.427157a91.747525 91.747525 0 0 1 118.50722 0c15.632577 13.652906 24.506965 32.56218 24.506965 52.427157 0 19.796713-8.874389 38.774252-24.57523 52.427157a91.747525 91.747525 0 0 1-118.438955 0z"
                                    fill="#FF6500" p-id="12653"></path>
                            </svg>
                            <span class="ml-5 font-bold">特惠</span>
                        </li>
                        <li @click="index = 1" :class="index == 1 ? `w-[90%]` : `w-[65%]`"
                            class="relative opacity-90 hover:opacity-100 h-12 rounded-sm flex items-center p-2 hover:cursor-pointer hover:scale-105 transition-all">
                            <img src="../assets/imgs/btn.png" class="absolute -z-10 w-full h-full left-0">
                            <svg t="1724326631290" class="icon" viewBox="0 0 1033 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="13839" width="25" height="25">
                                <path
                                    d="M350.906063 832.992658l-47.81686-47.808603-103.552278 103.568792 47.511348 47.531991z"
                                    opacity=".61" p-id="13840"></path>
                                <path
                                    d="M913.899842 73.314782a83.219172 83.219172 0 0 1 30.278782 65.016397l2.113818 163.804329c-0.404598 46.594809-31.517347 107.197787-69.161461 134.665027l-354.382302 289.981059c-37.639986 27.471368-95.402521 22.987764-128.360732-9.974575l-50.236191-50.236191L913.899842 73.314782z"
                                    p-id="13841"></path>
                                <path
                                    d="M422.053357 588.149031L944.178624 138.32705s-3.951022-50.335275-30.278782-65.012268L422.053357 588.149031z"
                                    p-id="13842"></path>
                                <path
                                    d="M794.357692 196.816211s-160.489104 117.102178-358.622322 34.522931L332.765217 375.22322s140.395454 45.347988 339.057126-48.506328l122.535349-129.900681z"
                                    opacity=".68" p-id="13843"></path>
                                <path
                                    d="M671.826472 326.721021L387.480883 611.066609l-122.147265-121.854138 67.431599-113.985123c0-0.004129 160.427176 25.320394 339.061255-48.506327zM473.920324 705.498921s396.538921-260.350459 424.5759-336.45614c28.032851-76.105681-8.108471-184.356249-8.108471-184.356248l53.790871-46.359483V323.430567s-2.510158 60.561692-117.234291 154.432522-321.783275 258.880695-321.783275 258.880695l-31.240734-31.244863z"
                                    opacity=".68" p-id="13844"></path>
                                <path
                                    d="M296.75188 707.41044a60.949776 56.891412 90 1 0 113.782824 0 60.949776 56.891412 90 1 0-113.782824 0Z"
                                    p-id="13845"></path>
                                <path
                                    d="M318.092352 695.181676a34.593116 30.245754 90 1 0 60.491507 0 34.593116 30.245754 90 1 0-60.491507 0Z"
                                    p-id="13846"></path>
                                <path
                                    d="M251.882804 606.690347a20.200993 20.200993 0 0 0-14.342581 6.898806c-9.821819 11.27094-19.540425 23.536861-28.920489 35.418826-28.965903 36.587206-58.885501 74.421233-98.940688 93.020348a20.213378 20.213378 0 0 0-5.775841 32.615541l157.363792 157.372049a20.205121 20.205121 0 0 0 34.21329-10.940656c7.187805-42.676816 48.659084-82.59989 126.791883-122.027537a20.192736 20.192736 0 0 0 4.888202-32.615541l-160.38589-154.147652a20.139064 20.139064 0 0 0-14.891678-5.594184z"
                                    fill="#DADAF0" p-id="13847"></path>
                                <path
                                    d="M302.07358 733.6515l-77.633244-77.633244-103.572921 103.560535 77.348374 77.356632z"
                                    fill="#FFFFFF" opacity=".61" p-id="13848"></path>
                                <path
                                    d="M1014.908934 138.223837c0.173399-27.888352-10.577344-54.096384-30.287039-73.822594-19.771623-19.796395-46.074612-30.592552-74.074435-30.390252l-213.966205 1.589491c-53.250031 0.388084-119.422422 34.485774-150.626 77.608473l-246.528075 344.465527c-32.921054 45.45533-27.384669 114.843861 12.373263 154.601792l118.807268 118.819654c39.79096 39.795088 109.134077 45.178717 154.568764 12.022336l0.450012-0.330284 354.8158-290.344371-0.887638 0.681211c42.974072-31.356333 77.001576-97.603038 77.463974-150.803527l-2.109689-164.097456z"
                                    fill="#FFFFFF" p-id="13849"></path>
                                <path
                                    d="M515.775559 781.369275c-37.024832 0-72.32393-14.065968-96.847514-38.597809l-118.807269-118.819654c-45.253031-45.257159-51.569712-124.195026-14.070096-175.967036l246.474404-344.391212c34.576602-47.779703 105.030299-84.082039 163.936443-84.511408l214.857972-1.589492c32.107729 0 62.295683 12.513633 84.99032 35.23717 22.818493 22.839136 35.290841 53.200489 35.117442 85.494003l2.109688 164.093328c-0.503683 58.452004-36.294079 128.571288-83.31 163.457531l-355.294711 290.666398c-22.034069 16.0807-50.137105 24.928182-79.156679 24.928181z m395.539811-730.844086h-0.65231l-213.962077 1.589491c-47.754932 0.346798-109.38179 32.095344-137.369227 70.775724l-246.478533 344.391212c-28.441577 39.270763-23.65246 99.039774 10.622758 133.314992l118.807268 118.819654c18.376174 18.376174 45.162203 28.920489 73.49231 28.920489 22.075354 0 43.26307-6.593294 59.665797-18.561959l0.070185-0.053671 354.002476-289.675546-0.016515-0.020642 0.887638-0.681211 0.012386 0.016514c38.259268-28.297078 69.702301-89.80008 70.106899-137.187571-0.008257-0.301384-2.080789-161.801983-2.10556-163.68873 0.140371-23.801088-8.897024-45.835156-25.456636-62.411282a86.534397 86.534397 0 0 0-61.626859-25.547464z"
                                    fill="#6E6E96" p-id="13850"></path>
                                <path
                                    d="M964.429159 73.314782a83.248072 83.248072 0 0 1 30.278782 65.016397l2.105561 163.804329c-0.396341 46.594809-31.513218 107.197787-69.161461 134.665027l-354.386431 289.981059c-37.639986 27.471368-95.398393 22.987764-128.356603-9.974575l-50.236191-50.236191L964.429159 73.314782z"
                                    fill="#D6D6ED" p-id="13851"></path>
                                <path
                                    d="M472.574417 588.149031L994.707941 138.32705s-3.951022-50.335275-30.278782-65.012268L472.574417 588.149031z"
                                    fill="#FFFFFF" p-id="13852"></path>
                                <path
                                    d="M844.878752 196.816211s-160.489104 117.102178-358.626451 34.522931L383.273891 375.22322s140.416097 45.347988 339.061255-48.506328l122.543606-129.900681z"
                                    fill="#D3D3F2" opacity=".36" p-id="13853"></path>
                                <path
                                    d="M722.335146 326.721021l-284.333203 284.34146-133.137463-127.778607 78.409411-108.060654s160.427176 25.324523 339.061255-48.502199z"
                                    fill="#CECEED" opacity=".68" p-id="13854"></path>
                                <path
                                    d="M524.428998 705.498921s355.261683-301.627697 383.298663-377.733377c28.03698-76.105681 33.177024-143.074882 33.177024-143.074883l53.790871-46.359482V323.430567s-2.510158 60.561692-117.234291 154.432522-321.787404 258.880695-321.787404 258.880695l-31.244863-31.244863z"
                                    fill="#FFFFFF" opacity=".68" p-id="13855"></path>
                                <path
                                    d="M275.54765 954.442198a36.471606 36.471606 0 0 1-25.952062-10.746614L92.223538 786.323535a36.690419 36.690419 0 0 1-10.18926-32.367828 36.756476 36.756476 0 0 1 20.675776-26.901629c36.463349-16.931181 65.127868-53.142689 92.855207-88.161045 8.550226-10.829185 19.073899-24.160272 29.523257-36.153708a36.855561 36.855561 0 0 1 27.75211-12.587948c9.483278 0 18.491773 3.633124 25.361679 10.226418l160.398276 154.160037a36.756476 36.756476 0 0 1 10.886985 31.905431 36.797762 36.797762 0 0 1-19.775752 27.355769c-72.09686 36.380778-111.780477 73.401481-117.952659 110.025843a36.537663 36.537663 0 0 1-25.039652 28.879204 36.711062 36.711062 0 0 1-11.171855 1.738119z m-22.702894-331.262425c-1.25095 0.053671-2.200517 0.507812-2.856956 1.267465-9.916776 11.382411-20.167964 24.362571-28.404421 34.795415-30.237496 38.19734-61.379145 77.538288-104.943599 97.76818a3.686795 3.686795 0 0 0-2.072532 2.7042c-0.210556 1.197279 0.165142 2.402816 1.007366 3.240912l157.380307 157.388563a3.748723 3.748723 0 0 0 3.736337 0.895895 3.703309 3.703309 0 0 0 2.506029-2.877599c8.129114-48.254486 52.494507-92.091425 135.639365-134.049873a3.67028 3.67028 0 0 0 0.904153-5.940983l-160.406534-154.168294a3.604224 3.604224 0 0 0-2.489515-1.023881z"
                                    fill="#6E6E96" p-id="13856"></path>
                                <path
                                    d="M188.154514 490.595535c-29.333344 28.990674-29.358115 76.976805-0.053671 106.611534l244.822984 247.626269c29.300316 29.638857 77.269932 30.163183 106.603277 1.160122 29.333344-28.994803 29.353987-76.980934 0.057799-106.611533l-244.822984-247.626269c-29.304444-29.634728-77.282318-30.167311-106.607405-1.160123z"
                                    fill="#DADAF0" p-id="13857"></path>
                                <path
                                    d="M239.208157 538.296796c-29.325087 28.990674-29.341601 76.980934-0.053671 106.603276l89.358325 92.157482c29.312701 29.642985 77.282318 30.167311 106.615662 1.168379 29.325087-28.998932 29.353987-76.980934 0.041285-106.611533l-89.345939-92.157482c-29.308573-29.642985-77.278189-30.167311-106.615662-1.160122z"
                                    fill="#F0F0F0" p-id="13858"></path>
                                <path
                                    d="M487.05324 883.918316h-0.004129c-24.957082 0-48.349443-9.759891-65.866878-27.475497l-244.818856-247.626269c-17.253208-17.451379-26.748872-40.591899-26.736487-65.169154 0.012386-24.639183 9.574106-47.651718 26.922272-64.801713 17.067424-16.881639 39.823988-26.179132 64.079216-26.179132 24.957082 0 48.353572 9.755762 65.875136 27.475497l244.827113 247.626269c17.24908 17.44725 26.744744 40.58777 26.732358 65.165025-0.012386 24.643312-9.574106 47.655847-26.922272 64.801713-17.083938 16.885767-39.840503 26.183261-64.087473 26.183261z m-246.424862-398.223369c-15.498575 0-30.010426 5.907954-40.856126 16.638054-11.031484 10.903499-17.108709 25.580493-17.116966 41.335038a59.211657 59.211657 0 0 0 17.19128 41.92542l244.822985 247.626269a59.162114 59.162114 0 0 0 42.37956 17.670192h0.004129c15.494446 0 30.010426-5.912083 40.860254-16.642183 11.027356-10.899371 17.108709-25.576364 17.116966-41.330909a59.228171 59.228171 0 0 0-17.19128-41.92542l-244.822984-247.626269a59.186885 59.186885 0 0 0-42.387818-17.670192z"
                                    fill="#6E6E96" p-id="13859"></path>
                                <path
                                    d="M54.228497 753.146511c-24.098343 23.825859-19.850066 67.567841 9.454379 97.219083l120.322446 121.693125c29.300316 29.638857 73.001012 34.390817 97.107612 10.569087 24.094215-23.825859 19.833552-67.580227-9.466764-97.214955l-120.326574-121.70551c-29.296187-29.642985-72.984498-34.394946-97.091099-10.56083z"
                                    fill="#DADAF0" p-id="13860"></path>
                                <path
                                    d="M94.92361 791.054852c-20.262921 20.039979-20.271178 53.192232-0.024772 73.669837l22.31481 24.255229c20.254664 20.485863 53.402788 20.849175 73.678094 0.805067 20.262921-20.039979 20.271178-53.19636 0.033029-73.673966l-22.331324-24.255228c-20.23815-20.477605-53.398659-20.840918-73.669837-0.800939z"
                                    fill="#F0F0F0" p-id="13861"></path>
                                <path
                                    d="M241.982542 1014.310294c-25.056167 0-50.467389-11.171855-69.722943-30.646222L51.937153 861.970947c-35.77801-36.20325-39.956102-90.287249-9.322265-120.574288 13.013188-12.86456 31.038435-19.95328 50.744001-19.953279 25.04791 0 50.455003 11.171855 69.70643 30.650351l120.322446 121.701382c35.782138 36.186736 39.968488 90.270734 9.334651 120.56603-13.013188 12.868689-31.034306 19.949151-50.739874 19.949151z m-148.623653-259.83439c-7.749287 0-18.817929 1.808305-27.525039 10.412202-17.385322 17.187152-12.992545 51.012357 9.590621 73.868007l120.318317 121.688996c13.09163 13.244387 29.944369 20.840918 46.235626 20.840918 7.749287 0 18.817929-1.808305 27.520911-10.408073 17.381193-17.19128 12.984288-51.012357-9.603006-73.85975l-120.326575-121.705511c-13.083373-13.240258-29.927855-20.836789-46.210855-20.836789z"
                                    fill="#6E6E96" p-id="13862"></path>
                                <path
                                    d="M491.540973 787.904769c29.333344-29.00306 29.358115-76.980934 0.053671-106.615662L293.911438 481.347584c2.035375 1.659677 4.004693 3.447339 5.899697 5.367115l244.83537 247.626269c29.304444 29.6306 29.279673 77.608473-0.053671 106.603276s-77.315346 28.478734-106.603276-1.160122L390.837394 792.103504c29.523257 24.201557 73.261111 22.929964 100.703579-4.198735zM243.150922 936.817421c19.507396-19.280326 19.528039-51.185757 0.037157-70.899581l-131.481916-132.984707c1.358293 1.11058 2.671172 2.295474 3.926251 3.567067l162.825863 164.691967c19.486754 19.705567 19.470239 51.619254-0.033028 70.903709-19.511525 19.284455-51.421084 18.941785-70.895452-0.776167l-31.368719-31.719646c19.63951 16.117857 48.737527 15.25499 66.989844-2.782642z"
                                    fill="#6E6E96" opacity=".15" p-id="13863"></path>
                                <path
                                    d="M362.263703 773.351632s-69.198618 35.142213-105.686738 105.707381l37.933112 42.833701s36.640877-96.645215 101.037992-106.087207l-33.284366-42.453875z"
                                    fill="#6E6E96" opacity=".15" p-id="13864"></path>
                            </svg>
                            <span class="ml-5 font-bold">武器</span>
                        </li>
                        <li @click="index = 2" :class="index == 2 ? `w-[90%]` : `w-[65%]`"
                            class="relative opacity-90 hover:opacity-100 h-12 rounded-sm flex items-center p-2 hover:cursor-pointer hover:scale-105 transition-all">
                            <img src="../assets/imgs/btn.png" class="absolute -z-10 w-full h-full left-0">
                            <svg t="1724326712617" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="15300" width="25" height="25">
                                <path
                                    d="M614.956 64.432a19.784 19.784 0 0 0-4.7-15.668 19.792 19.792 0 0 0-14.896-6.764h-166.72a19.792 19.792 0 0 0-14.896 6.764 19.784 19.784 0 0 0-4.7 15.668l8.2 60.452a19.78 19.78 0 0 0 19.596 17.116h150.32a19.78 19.78 0 0 0 19.596-17.116l8.2-60.452z"
                                    fill="#FFBB55" p-id="15301"></path>
                                <path
                                    d="M483.16 142a19.78 19.78 0 0 0 19.596-17.116l8.2-60.452a19.784 19.784 0 0 0-4.7-15.668 19.792 19.792 0 0 0-14.896-6.764h104c5.708 0 11.14 2.468 14.896 6.764a19.784 19.784 0 0 1 4.7 15.668l-8.2 60.452a19.78 19.78 0 0 1-19.596 17.116h-104z"
                                    fill="#FF885F" p-id="15302"></path>
                                <path
                                    d="M670 172c0-20.972-17.028-38-38-38H392c-20.972 0-38 17.028-38 38s17.028 38 38 38h240c20.972 0 38-17.028 38-38z"
                                    fill="#51FFFF" p-id="15303"></path>
                                <path
                                    d="M506 172c0-20.972-17.028-38-38-38H392c-20.972 0-38 17.028-38 38s17.028 38 38 38h76c20.972 0 38-17.028 38-38z"
                                    fill="#D3FAFF" p-id="15304"></path>
                                <path
                                    d="M616 302.74c154.764 48.012 268 200.42 268 380.8 0 104.128-37.736 198.936-99.416 269.72-15.92 18.12-38.172 28.4-61.46 28.4-89.544 0.34-332.704 0.34-422.248 0.34-23.38 0-45.712-10.32-61.696-28.508C177.736 882.476 140 787.668 140 683.54c0-180.38 113.236-332.788 268-380.8V206h208v96.74z"
                                    fill="#6DF0FF" p-id="15305"></path>
                                <path d="M396 201.736h236v55.428H396z" fill="#3AC4FB" p-id="15306"></path>
                                <path
                                    d="M332.852 939.936a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-178.82 145.18-324 324-324s324 145.18 324 324c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348z"
                                    fill="#6DF0FF" p-id="15307"></path>
                                <path
                                    d="M831.06 639.452A325.216 325.216 0 0 1 836 696.064c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-16.32 1.208-32.36 3.544-48.036 37.424-19.32 88.944-38.028 148.136-38.028 122.4 0 146.044 104 304 104 96.712 0 155.968-41.988 187.38-74.548z"
                                    fill="#00BC73" p-id="15308"></path>
                                <path
                                    d="M831.244 640.496A325.36 325.36 0 0 1 836 696.064c0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-17.104 1.328-33.9 3.888-50.292C221.896 674.124 282.196 714 384 714c157.956 0 181.596-104 304-104 54.94 0 104.88 14.504 143.244 30.496z"
                                    fill="#00D373" p-id="15309"></path>
                                <path
                                    d="M835.848 686.064c0.1 3.32 0.152 6.656 0.152 10 0 82.7-31.052 158.204-82.12 215.48a84.192 84.192 0 0 1-62.732 28.044c-79.872 0.348-278.424 0.348-358.296 0.348a84.528 84.528 0 0 1-62.992-28.16C219.052 854.268 188 778.764 188 696.064c0-3.344 0.052-6.68 0.152-10 2.392 78.78 32.956 150.532 81.708 205.712a84.528 84.528 0 0 0 62.992 28.16c79.872 0 278.424 0 358.296-0.348 23.948 0 46.76-10.2 62.732-28.044 49.004-54.96 79.576-126.7 81.968-205.48z"
                                    fill="#00AB81" p-id="15310"></path>
                                <path
                                    d="M271.112 453.86c66.292-78.796 164.928-105.068 220.124-58.628s46.184 148.112-20.108 226.908c-66.296 78.796-164.928 105.068-220.124 58.628s-46.188-148.112 20.108-226.908z"
                                    fill="#FFFFFF" fill-opacity=".4" p-id="15311"></path>
                                <path d="M348 486m-36 0a36 36 0 1 0 72 0 36 36 0 1 0-72 0Z" fill="#FFFFFF" p-id="15312">
                                </path>
                            </svg>
                            <span class="ml-5 font-bold">药水</span>
                        </li>
                        <li @click="index = 3" :class="index == 3 ? `w-[90%]` : `w-[65%]`"
                            class="relative opacity-90 hover:opacity-100 h-12 rounded-sm flex items-center p-2 hover:cursor-pointer hover:scale-105 transition-all">
                            <img src="../assets/imgs/btn.png" class="absolute -z-10 w-full h-full left-0">
                            <svg t="1724326834549" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="21001" width="25" height="25">
                                <path
                                    d="M760.5 125.9h-53.3c-14.1 0-27.7 6.1-36.8 17-27.3 32.6-105.4 53.7-154.6 53.7-49.2 0-127.3-21.1-154.6-53.7-9.2-10.9-22.7-17-36.8-17H271c-13 0-25.4 5.2-34.6 14.6L59.3 320.6c-11.4 11.6-11.4 30.3 0 41.9l108 109.9c11.4 11.6 29.8 11.6 41.2 0l3.6-3.6c3.9-3.9 10.5-1.2 10.5 4.4v383.1c0 24.9 19.8 45.1 44.3 45.1h497.7c24.5 0 44.3-20.2 44.3-45.1V473.1c0-5.6 6.6-8.4 10.5-4.4l3.6 3.6c11.4 11.6 29.8 11.6 41.2 0l108-109.9c11.4-11.6 11.4-30.3 0-41.9L795.1 140.4c-9.2-9.3-21.7-14.5-34.6-14.5z"
                                    fill="#FF556E" p-id="21002"></path>
                                <path
                                    d="M934.7 400.5l37.5-38.1c11.4-11.6 11.4-30.3 0-41.9L795.1 140.4c-7-7.1-15.8-11.8-25.4-13.7 85.3 66.2 145.8 163 165 273.8zM59.3 320.6c-11.4 11.6-11.4 30.3 0 41.9l9.6 9.8c8.4-34.9 21-68.1 37.1-99.2l-46.7 47.5zM222.6 856.2c0 24.9 19.8 45.1 44.3 45.1h107.7c-56.1-16.4-107.5-43.6-152-79.2v34.1zM808.9 856.2v-64c-51.3 50.4-114.8 88.4-185.7 109.1h141.4c24.5 0 44.3-20.2 44.3-45.1z"
                                    fill="#FF556E" p-id="21003"></path>
                                <path
                                    d="M287.9 125.9H271c-13 0-25.4 5.2-34.6 14.6L106 273c-16.1 31.1-28.7 64.3-37.1 99.2l32.7 33.2C117.3 286 188.2 184 287.9 125.9zM861.8 455.8c0 6.4-0.2 12.7-0.5 19 1-0.8 1.9-1.6 2.8-2.5l70.6-71.8c-19.2-110.8-79.7-207.6-165-273.7-3-0.6-6.1-0.9-9.2-0.9h-53.3c-8.6 0-17 2.3-24.3 6.5 107.5 67.5 178.9 187.1 178.9 323.4zM808.9 649.8C742.5 762.2 620 837.6 480 837.6c-99.2 0-189.6-37.9-257.5-99.9v84.4c44.4 35.6 95.9 62.8 152 79.2h248.7c70.9-20.7 134.4-58.7 185.7-109.1V649.8z"
                                    fill="#FF5F71" p-id="21004"></path>
                                <path
                                    d="M808.9 649.8V473.1c0-5.6 6.6-8.4 10.5-4.4l3.6 3.6c10.5 10.7 26.9 11.5 38.4 2.5 0.3-6.3 0.5-12.6 0.5-19 0-136.3-71.4-255.9-178.9-323.5-4.7 2.7-9 6.2-12.5 10.5-7.5 8.9-18.8 17-32.3 24C725 224.4 782.4 323 782.4 435c0 177.4-143.8 321.2-321.2 321.2-94.7 0-179.9-41-238.6-106.3v87.8c67.9 62 158.3 99.9 257.5 99.9 139.9 0 262.4-75.4 328.8-187.8zM350.4 133.5c-7.7-5-16.8-7.6-26.1-7.6h-36.4C188.2 184 117.3 286 101.6 405.5l38.6 39.3c-0.1-3.2-0.2-6.5-0.2-9.7 0-138.5 87.6-256.5 210.4-301.6z"
                                    fill="#FF6974" p-id="21005"></path>
                                <path
                                    d="M382.4 160.6c-8.6-5.4-16-11.4-21.3-17.8-3.1-3.7-6.7-6.8-10.7-9.4C227.6 178.6 140 296.6 140 435c0 3.3 0.1 6.5 0.2 9.7l27.1 27.6c6.3 6.4 14.9 9.3 23.1 8.6-5.6-21.3-8.6-43.6-8.6-66.7 0-123.2 85.6-226.5 200.6-253.6zM461.2 756.2c177.4 0 321.2-143.8 321.2-321.2 0-112-57.4-210.6-144.3-268.1-18.6 9.7-41.4 17.4-64 22.5 77.1 45.2 128.9 129 128.9 224.8 0 143.9-116.6 260.5-260.5 260.5-92.4 0-173.6-48.1-219.8-120.6v95.8c58.6 65.3 143.8 106.3 238.5 106.3z"
                                    fill="#FF7377" p-id="21006"></path>
                                <path
                                    d="M442.4 674.8c143.9 0 260.5-116.6 260.5-260.5 0-95.8-51.8-179.6-128.9-224.8-20.7 4.7-41.2 7.2-58.3 7.2-39.6 0-97.8-13.7-133.3-36-115 27.1-200.6 130.3-200.6 253.6 0 23 3 45.4 8.6 66.7 6.6-0.6 13-3.4 18-8.6l3.6-3.6c3.9-3.9 10.5-1.2 10.5 4.4v81c46.3 72.5 127.5 120.6 219.9 120.6z m-18.9-481.3c110.4 0 199.9 89.5 199.9 199.9s-89.5 199.9-199.9 199.9-199.9-89.5-199.9-199.9 89.5-199.9 199.9-199.9z"
                                    fill="#FF7E7A" p-id="21007"></path>
                                <path
                                    d="M423.5 593.3c110.4 0 199.9-89.5 199.9-199.9s-89.5-199.9-199.9-199.9S223.6 283 223.6 393.4s89.5 199.9 199.9 199.9z m-18.8-360c76.9 0 139.3 62.4 139.3 139.3s-62.4 139.3-139.3 139.3-139.3-62.4-139.3-139.3 62.4-139.3 139.3-139.3z"
                                    fill="#FF887D" p-id="21008"></path>
                                <path d="M404.7 372.6m-139.3 0a139.3 139.3 0 1 0 278.6 0 139.3 139.3 0 1 0-278.6 0Z"
                                    fill="#FF9280" p-id="21009"></path>
                                <path
                                    d="M760.5 143.9c8.2 0 15.9 3.3 21.8 9.2l177.1 180.1c4.5 4.6 4.5 12.1 0 16.6l-108 109.9c-2.1 2.1-4.8 3.3-7.8 3.3-2.9 0-5.7-1.2-7.8-3.3l-3.6-3.6c-4.6-4.7-10.7-7.2-17.1-7.2-13.3 0-24.2 10.9-24.2 24.3v383.1c0 14.9-11.8 27.1-26.3 27.1H266.9c-14.5 0-26.3-12.1-26.3-27.1V473.1c0-13.4-10.9-24.3-24.2-24.3-6.5 0-12.6 2.6-17.1 7.2l-3.5 3.6c-2.1 2.1-4.8 3.3-7.8 3.3-2.9 0-5.7-1.2-7.8-3.3l-108-109.9c-4.5-4.6-4.5-12.1 0-16.6l177-180.1c5.8-5.9 13.6-9.2 21.8-9.2h53.3c9 0 17.4 3.9 23 10.6 18.8 22.4 52.4 36.6 77.4 44.7 30.2 9.7 64.2 15.5 91 15.5s60.8-5.8 91-15.5c25-8 58.7-22.3 77.4-44.7 5.6-6.7 14-10.6 23-10.6l53.4 0.1m0-18h-53.3c-14.1 0-27.7 6.1-36.8 17-27.3 32.6-105.4 53.7-154.6 53.7-49.2 0-127.3-21.1-154.6-53.7-9.2-10.9-22.7-17-36.8-17H271c-13 0-25.4 5.2-34.6 14.6L59.3 320.6c-11.4 11.6-11.4 30.3 0 41.9l108 109.9c5.7 5.8 13.1 8.7 20.6 8.7s14.9-2.9 20.6-8.7l3.6-3.6c1.3-1.3 2.8-1.8 4.3-1.8 3.2 0 6.2 2.5 6.2 6.3v383.1c0 24.9 19.8 45.1 44.3 45.1h497.7c24.5 0 44.3-20.2 44.3-45.1V473.1c0-3.8 3-6.3 6.2-6.3 1.5 0 3.1 0.6 4.3 1.8l3.6 3.6c5.7 5.8 13.1 8.7 20.6 8.7s14.9-2.9 20.6-8.7l108-109.9c11.4-11.6 11.4-30.3 0-41.9l-177.1-180c-9.2-9.3-21.7-14.5-34.6-14.5z"
                                    fill="#EF4868" p-id="21010"></path>
                                <path
                                    d="M309.3 384h206.8c19 0 34.5 15.4 34.5 34.5v275.7c0 19-15.4 34.5-34.5 34.5H309.3c-19 0-34.5-15.4-34.5-34.5V418.5c0.1-19 15.5-34.5 34.5-34.5z"
                                    fill="#FFC7C7" p-id="21011"></path>
                                <path
                                    d="M167.7 303c-7-7-7-18.4 0-25.5l87.8-87.8c7-7 18.4-7 25.5 0s7 18.4 0 25.5L193.2 303c-7.1 7.1-18.5 7.1-25.5 0zM118.5 352.3c-7-7-7-18.4 0-25.5l7.5-7.5c7-7 18.4-7 25.5 0 7 7 7 18.4 0 25.5l-7.5 7.5c-7.1 7-18.5 7-25.5 0z"
                                    fill="#FFFFFF" p-id="21012"></path>
                            </svg>
                            <span class="ml-5 font-bold">皮肤</span>
                        </li>
                        <li @click="index = 4" :class="index == 4 ? `w-[90%]` : `w-[65%]`"
                            class="relative opacity-90 hover:opacity-100 h-12 rounded-sm flex items-center p-2 hover:cursor-pointer hover:scale-105 transition-all">
                            <img src="../assets/imgs/btn.png" class="absolute -z-10 w-full h-full left-0">
                            <svg t="1724326937010" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="24904" width="25" height="25">
                                <path
                                    d="M688.6912 915.0976H254.6688c-60.2624 0-109.1584-48.8448-109.1584-109.1584V215.04c0-60.2624 48.8448-109.1584 109.1584-109.1584h434.0224c60.2624 0 109.1584 48.8448 109.1584 109.1584v590.848c0 60.3136-48.896 109.2096-109.1584 109.2096z"
                                    fill="#FFBE4A" p-id="24905"></path>
                                <path
                                    d="M688.6912 105.8816h-92.8256c60.2624 0 109.1584 48.8448 109.1584 109.1584v590.848c0 60.2624-48.8448 109.1584-109.1584 109.1584h92.8256c60.2624 0 109.1584-48.8448 109.1584-109.1584V215.04c0-60.2624-48.896-109.1584-109.1584-109.1584z"
                                    fill="#F2B200" p-id="24906"></path>
                                <path
                                    d="M688.6912 930.4576H254.6688c-68.6592 0-124.5184-55.8592-124.5184-124.5184V215.04c0-68.6592 55.8592-124.5184 124.5184-124.5184h434.0224c68.6592 0 124.5184 55.8592 124.5184 124.5184v590.848c0 68.7104-55.8592 124.5696-124.5184 124.5696zM254.6688 121.2416c-51.712 0-93.7984 42.0864-93.7984 93.7984v590.848c0 51.712 42.0864 93.7984 93.7984 93.7984h434.0224c51.712 0 93.7984-42.0864 93.7984-93.7984V215.04c0-51.712-42.0864-93.7984-93.7984-93.7984H254.6688z"
                                    fill="#333333" p-id="24907"></path>
                                <path
                                    d="M686.7456 701.3376H256.6144a26.4192 26.4192 0 0 1-26.4192-26.4192V244.736a26.4192 26.4192 0 0 1 26.4192-26.4192h430.1824a26.4192 26.4192 0 0 1 26.4192 26.4192v430.1824c0 14.592-11.8272 26.4192-26.4704 26.4192z"
                                    fill="#FEFCE2" p-id="24908"></path>
                                <path
                                    d="M686.7456 218.3168H602.112a26.4192 26.4192 0 0 1 26.4192 26.4192v430.1824a26.4192 26.4192 0 0 1-26.4192 26.4192h84.6336a26.4192 26.4192 0 0 0 26.4192-26.4192V244.736c0.0512-14.592-11.776-26.4192-26.4192-26.4192z"
                                    fill="#FDF5B5" p-id="24909"></path>
                                <path
                                    d="M686.7456 716.6976H256.6144c-23.04 0-41.7792-18.7392-41.7792-41.7792V244.736c0-23.04 18.7392-41.7792 41.7792-41.7792h430.1824c23.04 0 41.7792 18.7392 41.7792 41.7792v430.1824c0 23.04-18.7392 41.7792-41.8304 41.7792zM256.6144 233.6768c-6.0928 0-11.0592 4.9664-11.0592 11.0592v430.1824c0 6.0928 4.9664 11.0592 11.0592 11.0592h430.1824c6.0928 0 11.0592-4.9664 11.0592-11.0592V244.736c0-6.0928-4.9664-11.0592-11.0592-11.0592H256.6144z"
                                    fill="#333333" p-id="24910"></path>
                                <path
                                    d="M471.7056 810.496m-56.6272 0a56.6272 56.6272 0 1 0 113.2544 0 56.6272 56.6272 0 1 0-113.2544 0Z"
                                    fill="#F5D126" p-id="24911"></path>
                                <path
                                    d="M458.0864 796.8768m-13.6192 0a13.6192 13.6192 0 1 0 27.2384 0 13.6192 13.6192 0 1 0-27.2384 0Z"
                                    fill="#FFFFFF" p-id="24912"></path>
                                <path
                                    d="M471.7056 882.4832c-39.68 0-71.9872-32.3072-71.9872-71.9872s32.3072-71.9872 71.9872-71.9872 71.9872 32.3072 71.9872 71.9872-32.3072 71.9872-71.9872 71.9872z m0-113.2544c-22.7328 0-41.2672 18.5344-41.2672 41.2672s18.5344 41.2672 41.2672 41.2672 41.2672-18.5344 41.2672-41.2672-18.5344-41.2672-41.2672-41.2672zM574.3104 499.8656H486.912V442.7776h87.3984c8.4992 0 15.36-6.8608 15.36-15.36s-6.8608-15.36-15.36-15.36H501.4016l51.8656-72.4992c4.9152-6.912 3.328-16.4864-3.5328-21.4528a15.39072 15.39072 0 0 0-21.4528 3.5328L471.6032 400.896l-55.808-79.1552a15.34976 15.34976 0 0 0-21.4016-3.6864c-6.912 4.9152-8.6016 14.4896-3.6864 21.4016l51.2 72.6016H369.1008c-8.4992 0-15.36 6.8608-15.36 15.36s6.8608 15.36 15.36 15.36H456.192v57.088H369.1008c-8.4992 0-15.36 6.8608-15.36 15.36s6.8608 15.36 15.36 15.36H456.192v58.4704c0 8.4992 6.8608 15.36 15.36 15.36s15.36-6.8608 15.36-15.36v-58.4704h87.3984c8.4992 0 15.36-6.8608 15.36-15.36s-6.912-15.36-15.36-15.36z"
                                    fill="#333333" p-id="24913"></path>
                                <path
                                    d="M536.1664 180.0704H407.8592c-8.4992 0-15.36-6.8608-15.36-15.36s6.8608-15.36 15.36-15.36h128.3072c8.4992 0 15.36 6.8608 15.36 15.36s-6.912 15.36-15.36 15.36z"
                                    fill="#FFFFFF" p-id="24914"></path>
                                <path
                                    d="M736 738.3552m-178.944 0a178.944 178.944 0 1 0 357.888 0 178.944 178.944 0 1 0-357.888 0Z"
                                    fill="#FF6950" p-id="24915"></path>
                                <path
                                    d="M736 559.4624c-12.0832 0-23.9104 1.2288-35.328 3.4816 81.8688 16.384 143.616 88.6784 143.616 175.4112s-61.696 159.0272-143.616 175.4112c11.4176 2.304 23.2448 3.4816 35.328 3.4816 98.816 0 178.944-80.128 178.944-178.944s-80.128-178.8416-178.944-178.8416z"
                                    fill="#F4403B" p-id="24916"></path>
                                <path
                                    d="M736 932.6592c-107.1104 0-194.304-87.1424-194.304-194.304s87.1424-194.304 194.304-194.304c107.1104 0 194.304 87.1424 194.304 194.304s-87.1936 194.304-194.304 194.304z m0-357.8368c-90.2144 0-163.584 73.3696-163.584 163.584s73.3696 163.584 163.584 163.584c90.1632 0 163.584-73.3696 163.584-163.584s-73.4208-163.584-163.584-163.584z"
                                    fill="#333333" p-id="24917"></path>
                                <path
                                    d="M621.056 713.9328c-1.6896 0-3.3792-0.256-5.0176-0.8704a15.3088 15.3088 0 0 1-9.472-19.5584 137.5232 137.5232 0 0 1 39.4752-58.4704 15.3344 15.3344 0 0 1 21.6576 1.4848c5.5808 6.4 4.9152 16.0768-1.4848 21.6576a106.37312 106.37312 0 0 0-30.6688 45.312 15.22176 15.22176 0 0 1-14.4896 10.4448z"
                                    fill="#FFFFFF" p-id="24918"></path>
                                <path
                                    d="M695.6544 637.952c-6.0928 0-11.8272-3.6352-14.2848-9.6256-3.1744-7.8848 0.6656-16.8448 8.5504-19.968 3.6864-1.4848 7.4752-2.816 11.2128-3.9424 8.0896-2.4576 16.6912 2.1504 19.1488 10.24s-2.1504 16.6912-10.24 19.1488c-2.9184 0.8704-5.8368 1.8944-8.704 3.072-1.792 0.7168-3.7376 1.0752-5.6832 1.0752z"
                                    fill="#FFFFFF" p-id="24919"></path>
                                <path
                                    d="M810.1888 722.9952h-58.8288v-58.8288c0-8.4992-6.8608-15.36-15.36-15.36s-15.36 6.8608-15.36 15.36v58.8288h-58.8288c-8.4992 0-15.36 6.8608-15.36 15.36s6.8608 15.36 15.36 15.36h58.8288v58.8288c0 8.4992 6.8608 15.36 15.36 15.36s15.36-6.8608 15.36-15.36v-58.8288h58.8288c8.4992 0 15.36-6.8608 15.36-15.36s-6.912-15.36-15.36-15.36z"
                                    fill="#333333" p-id="24920"></path>
                            </svg>
                            <span class="ml-5 font-bold">充值</span>
                        </li>
                    </ul>
                </div>
                <!-- 特惠  -->
                <div v-if="index == 0" class="w-full p-2 pl-1 grid grid-cols-3 gap-y-3 overflow-y-auto scrollable">
                    <button v-for="item in goodsList" :key="item.id"
                        class="group/button card w-40 h-[12.9rem] relative inline-flex items-center justify-center overflow-hidden rounded-md bg-gradient-to-bl from-orange-300 to-orange-500  p-1 pt-1.5 text-base font-semibold transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50 border border-white/20">
                        <img src="../assets/imgs/card.png"
                            class="absolute top-[1px] -left-[1px] h-[12.35rem] w-96 z-0 border scale-125" alt="">
                        <div class="w-full h-full flex flex-col items-center z-50">
                            <p class="text-sm font-serif text-black">{{ item.type }}</p>
                            <p class="text-lg font-mono">{{ item.name }}</p>
                            <img :src="`/api` + item.img" class="w-[6.5rem] h-[6.5rem] rounded-md mt-1 mb-1">
                            <div
                                class="flex items-center bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                                <svg t="1724322491147" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="10705" width="30" height="30">
                                    <path
                                        d="M512 896c200.298667 0 362.666667-152.810667 362.666667-341.333333s19.050667-192.533333-362.666667-192.533334S149.333333 366.144 149.333333 554.666667s162.368 341.333333 362.666667 341.333333z"
                                        fill="#FF5C00" p-id="10706"></path>
                                    <path
                                        d="M149.333333 490.666667a362.666667 341.333333 0 1 0 725.333334 0 362.666667 341.333333 0 1 0-725.333334 0Z"
                                        fill="#FFCC00" p-id="10707"></path>
                                    <path
                                        d="M820.224 310.698667a332.288 332.288 0 0 1 31.146667 59.349333L404.629333 816.789333a373.12 373.12 0 0 1-64.853333-25.642666z m-189.269333-142.570667c57.621333 18.816 108.629333 50.922667 148.906666 92.416L284.16 756.266667c-46.570667-35.456-83.626667-81.514667-107.008-134.314667z"
                                        fill="#FFE3B6" p-id="10708"></path>
                                    <path d="M192 480a320 288 0 1 0 640 0 320 288 0 1 0-640 0Z" fill="#FF7325"
                                        p-id="10709">
                                    </path>
                                    <path
                                        d="M213.333333 480a298.666667 266.666667 0 1 0 597.333334 0 298.666667 266.666667 0 1 0-597.333334 0Z"
                                        fill="#FFB329" p-id="10710"></path>
                                    <path
                                        d="M808.533333 512c-17.706667 132.181333-143.722667 234.666667-296.533333 234.666667s-278.826667-102.485333-296.533333-234.666667z"
                                        fill="#FF9B1A" p-id="10711"></path>
                                    <path
                                        d="M512 213.333333c108.074667 0 202.730667 51.242667 255.168 128H256.853333c52.437333-76.757333 147.093333-128 255.168-128z"
                                        fill="#FFCC00" p-id="10712"></path>
                                    <path
                                        d="M587.648 510.037333l94.72-13.930666 0.298667 40.938666c-6.4 25.045333-16.426667 45.973333-30.165334 62.762667a129.92 129.92 0 0 1-51.093333 38.037333c-20.352 8.533333-46.250667 12.821333-77.674667 12.821334-38.144 0-69.290667-5.205333-93.482666-15.637334-24.170667-10.432-45.034667-28.757333-62.592-55.018666-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989334 44.202667 0 78.954667 8.405333 104.256 25.194667 9.962667 6.613333 28.501333 18.346667 55.594666 35.2-0.341333 16.469333-0.085333 30.549333 0.768 42.197333l-95.744 20.053334c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373333 20.736 0 36.416-5.482667 47.04-16.426666 10.602667-10.944 18.304-26.858667 23.104-47.701334z"
                                        fill="#FF5C00" p-id="10713"></path>
                                    <path
                                        d="M587.648 467.370667L682.666667 494.378667c-6.4 25.045333-16.426667 45.973333-30.165334 62.762666a129.92 129.92 0 0 1-51.093333 38.037334c-20.352 8.533333-46.250667 12.821333-77.674667 12.821333-38.144 0-69.290667-5.205333-93.482666-15.637333-24.170667-10.432-45.034667-28.757333-62.592-55.018667-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989333 44.202667 0 78.954667 8.405333 104.256 25.194666 25.28 16.810667 44.074667 42.602667 56.362666 77.397334l-95.744 20.053333c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373334 20.736 0 36.416-5.482667 47.04-16.426667 10.602667-10.944 18.304-26.858667 23.104-47.701333z"
                                        fill="#FFDC96" p-id="10714"></path>
                                    <path
                                        d="M622.933333 291.861333c18.858667 12.522667 34.112 30.058667 45.738667 52.586667l-34.24 34.197333-50.858667 10.666667c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 5.525333 6.357333 12.074667 11.221333 19.690667 14.592l-63.637334 63.616c-21.44-10.794667-40.149333-28.117333-56.106666-51.989333-9.92-14.848-17.045333-32.021333-21.333334-51.584l215.893334-215.893333c24.170667 3.84 44.416 11.178667 60.736 21.994666z"
                                        fill="#FFECBD" p-id="10715"></path>
                                </svg>
                                <p class="font-semibold text-orange-800">7000</p>
                            </div>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                </div>
                <!-- 武器 -->
                <div v-if="index == 1" class="w-full p-2 pl-1 grid grid-cols-3 gap-y-3 overflow-y-auto scrollable">
                    <button v-for="_ in 9"
                        class="group/button w-40 h-[12.9rem] relative inline-flex items-center justify-center overflow-hidden rounded-md p-1 pt-1.5 text-base font-semibold transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50 border border-white/20">
                        <img src="../assets/imgs/card.png"
                            class="absolute top-[1px] -left-[1px] h-[12.35rem] w-96 z-0 border scale-150">
                        <img src="../assets/imgs/border3.png" class="absolute top-0 left-0 h-full w-full z-0">
                        <div class="w-full h-full flex flex-col items-center z-40">
                            <p class="text-sm font-serif">武器卡</p>
                            <p class="text-lg font-mono from-slate-400 to-red-300">烈焰弹</p>
                            <img src="../assets/imgs/avatar.jpg" class="w-[6.5rem] h-[6.5rem] rounded-md mt-1 mb-1">
                            <div
                                class="flex items-center z-50 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                                <svg t="1724322491147" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="10705" width="30" height="30">
                                    <path
                                        d="M512 896c200.298667 0 362.666667-152.810667 362.666667-341.333333s19.050667-192.533333-362.666667-192.533334S149.333333 366.144 149.333333 554.666667s162.368 341.333333 362.666667 341.333333z"
                                        fill="#FF5C00" p-id="10706"></path>
                                    <path
                                        d="M149.333333 490.666667a362.666667 341.333333 0 1 0 725.333334 0 362.666667 341.333333 0 1 0-725.333334 0Z"
                                        fill="#FFCC00" p-id="10707"></path>
                                    <path
                                        d="M820.224 310.698667a332.288 332.288 0 0 1 31.146667 59.349333L404.629333 816.789333a373.12 373.12 0 0 1-64.853333-25.642666z m-189.269333-142.570667c57.621333 18.816 108.629333 50.922667 148.906666 92.416L284.16 756.266667c-46.570667-35.456-83.626667-81.514667-107.008-134.314667z"
                                        fill="#FFE3B6" p-id="10708"></path>
                                    <path d="M192 480a320 288 0 1 0 640 0 320 288 0 1 0-640 0Z" fill="#FF7325"
                                        p-id="10709">
                                    </path>
                                    <path
                                        d="M213.333333 480a298.666667 266.666667 0 1 0 597.333334 0 298.666667 266.666667 0 1 0-597.333334 0Z"
                                        fill="#FFB329" p-id="10710"></path>
                                    <path
                                        d="M808.533333 512c-17.706667 132.181333-143.722667 234.666667-296.533333 234.666667s-278.826667-102.485333-296.533333-234.666667z"
                                        fill="#FF9B1A" p-id="10711"></path>
                                    <path
                                        d="M512 213.333333c108.074667 0 202.730667 51.242667 255.168 128H256.853333c52.437333-76.757333 147.093333-128 255.168-128z"
                                        fill="#FFCC00" p-id="10712"></path>
                                    <path
                                        d="M587.648 510.037333l94.72-13.930666 0.298667 40.938666c-6.4 25.045333-16.426667 45.973333-30.165334 62.762667a129.92 129.92 0 0 1-51.093333 38.037333c-20.352 8.533333-46.250667 12.821333-77.674667 12.821334-38.144 0-69.290667-5.205333-93.482666-15.637334-24.170667-10.432-45.034667-28.757333-62.592-55.018666-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989334 44.202667 0 78.954667 8.405333 104.256 25.194667 9.962667 6.613333 28.501333 18.346667 55.594666 35.2-0.341333 16.469333-0.085333 30.549333 0.768 42.197333l-95.744 20.053334c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373333 20.736 0 36.416-5.482667 47.04-16.426666 10.602667-10.944 18.304-26.858667 23.104-47.701334z"
                                        fill="#FF5C00" p-id="10713"></path>
                                    <path
                                        d="M587.648 467.370667L682.666667 494.378667c-6.4 25.045333-16.426667 45.973333-30.165334 62.762666a129.92 129.92 0 0 1-51.093333 38.037334c-20.352 8.533333-46.250667 12.821333-77.674667 12.821333-38.144 0-69.290667-5.205333-93.482666-15.637333-24.170667-10.432-45.034667-28.757333-62.592-55.018667-17.557333-26.24-26.325333-59.84-26.325334-100.8 0-54.613333 15.445333-96.554667 46.314667-125.888 30.890667-29.333333 74.56-43.989333 131.050667-43.989333 44.202667 0 78.954667 8.405333 104.256 25.194666 25.28 16.810667 44.074667 42.602667 56.362666 77.397334l-95.744 20.053333c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 11.818667 13.589333 28.416 20.373333 49.792 20.373334 20.736 0 36.416-5.482667 47.04-16.426667 10.602667-10.944 18.304-26.858667 23.104-47.701333z"
                                        fill="#FFDC96" p-id="10714"></path>
                                    <path
                                        d="M622.933333 291.861333c18.858667 12.522667 34.112 30.058667 45.738667 52.586667l-34.24 34.197333-50.858667 10.666667c-3.349333-10.069333-6.869333-17.408-10.538666-22.058667a61.482667 61.482667 0 0 0-22.250667-18.005333 67.328 67.328 0 0 0-29.44-6.314667c-24.576 0-43.413333 9.301333-56.490667 27.904-9.898667 13.802667-14.848 35.477333-14.848 65.024 0 36.608 5.909333 61.696 17.706667 75.264 5.525333 6.357333 12.074667 11.221333 19.690667 14.592l-63.637334 63.616c-21.44-10.794667-40.149333-28.117333-56.106666-51.989333-9.92-14.848-17.045333-32.021333-21.333334-51.584l215.893334-215.893333c24.170667 3.84 44.416 11.178667 60.736 21.994666z"
                                        fill="#FFECBD" p-id="10715"></path>
                                </svg>
                                <p class="font-semibold text-orange-800">9999</p>
                            </div>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                </div>
                <!-- 氪金 -->
                <div v-if="index == 4" class="w-full h-fit p-2 pl-1 grid grid-cols-3 gap-3 overflow-y-auto scrollable">
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full" alt="">
                        <!-- 图片 -->
                        <div class="sprite item1 w-full h-40 scale-75"></div>
                        <!-- 价格 -->
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">6</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full">
                        <div class="sprite item2 w-full h-40 scale-75"></div>
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">30</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full">
                        <div class="sprite item3 w-full h-40 scale-75"></div>
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">68</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full">
                        <div class="sprite item4 w-full h-40 scale-75"></div>
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">98</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full">
                        <div class="sprite item5 w-full h-40 scale-75"></div>
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">328</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                    <button
                        class="w-40 h-[12.9rem] flex flex-col items-center group/button relative overflow-hidden rounded-md p-1 text-base font-semibold text-white transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-red-300/50">
                        <img src="../assets/imgs/role.png" class="absolute top-0 left-0 h-full w-full">
                        <div class="sprite item6 w-full h-40 scale-75"></div>
                        <div
                            class="flex w-fit items-center z-50 -mt-2 bg-orange-300 rounded-full px-2 active:scale-90 transition-all">
                            <svg t="1724340507458" class="icon mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="37505" width="20" height="20">
                                <path
                                    d="M4.29209031 311.38677191l-1.15912818 532.3501807 875.82287872 2.00721521 1.19873764-532.38862393-875.86248818-1.96877198z m83.9931813 447.5182319l0.83993258-362.2901999 273.94708026 0.57432292C292.10445369 426.80342187 242.06502115 495.93877959 241.87513287 576.58155349c-0.13280483 83.46895246 53.05782841 154.81539243 127.97834923 182.97349462l-281.56821049-0.6500443z m185.88005604-182.27452246c0.23415581-89.86338418 74.99973632-162.83959523 166.65482012-162.63922346 91.86594019 0.18755811 166.28902457 73.55169906 166.11544633 163.39527907-0.21551673 89.96240498-75.03817955 162.91764793-166.82723328 162.69281053-91.63644473-0.18289778-166.09913742-73.43170901-165.94303317-163.44886614zM510.43546681 759.82997731c74.92518002-27.76201785 128.44199936-98.86731378 128.59810361-182.35839942 0.24697059-80.65908281-49.41734685-149.92841045-120.2453834-179.93063538l276.19544178 0.6255798-0.85973675 362.26923179-283.68842524-0.60577679z"
                                    p-id="37506" fill="#d81e06"></path>
                                <path
                                    d="M1023.54526777 181.40120747l-875.82520889-2.04332942-0.19571257 91.23220593 59.50002404 0.13746404 0.0407734-31.83003648 756.98126507 1.73461617-0.96807709 413.4677925-57.22370389-0.14095928-0.15610425 59.40100323 116.64800654 0.27609315z"
                                    p-id="37507" fill="#d81e06"></path>
                                <path
                                    d="M442.94385891 442.69688832c-74.43939328-0.17241315-134.85973163 59.00375381-135.01234062 132.13839929-0.1933824 73.2441509 60.01959367 132.69990627 134.40190464 132.88862834 74.50113593 0.15377408 134.84458667-59.02355797 135.01583474-132.21179051 0.20969131-73.22784199-59.96367531-132.64282397-134.40539876-132.81523712z m48.26986724 129.26678699l-0.38443463 25.25736732-36.14619193-0.54053888-0.1572682 10.31799808 35.76059108 0.53704363-0.29123812 25.35522304-35.8433041-0.66169401-0.47297081 30.36802048-28.22799929-0.63257031 0.4496714-30.15599901-35.74777742-0.56500224 0.37395114-25.22824362 35.76874667 0.54519922 0.15726819-10.32032712-35.76874666-0.54519922 0.38443463-25.25736618 31.72752156 0.40656896-46.98958279-67.25628814 31.69723164 0.4927761 34.95211464 47.21791432 32.43348309-46.57835464 31.71820203 0.47530098-47.38683336 66.20200391 31.99313124 0.56616733z"
                                    p-id="37508" fill="#d81e06"></path>
                            </svg>
                            <span class="text-red-600">￥</span>
                            <p class="font-mono text-red-700">648</p>
                        </div>
                        <div
                            class="absolute inset-0 flex h-full w-full justify-center [transform:skew(-13deg)_translateX(-100%)] group-hover/button:duration-1000 group-hover/button:[transform:skew(-13deg)_translateX(100%)]">
                            <div class="relative h-full w-10 z-40 bg-white/30"></div>
                        </div>
                    </button>
                </div>
                <!-- 空状态 -->
                <div v-if="index == 2 || index == 3" class="w-full h-full p-2 flex flex-col items-center">
                    <img src="../assets/imgs/empty.png" class="w-96 opacity-75 -mt-10">
                    <p class="font-serif text-2xl tracking-widest text-orange-800 font-bold">还没有进货哦靓仔~</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { getGoodsApi } from "../api"
import { getGoodsType, goodsItemType } from "../types"
const index = ref(0)
const emit = defineEmits(['showName'])
const goodsList = ref([] as goodsItemType[])
// 查询参数
const query = reactive<getGoodsType>({
    keyword: '',
    page: 1,
    pageSize: 20
})
onMounted(() => {
    getGoodList()
})
// 获取商品列表
const getGoodList = () => {
    getGoodsApi(query).then(res => {
        goodsList.value = res.result
    })
}
</script>
<style scoped>
.box {
    background: url("../assets/imgs/border2.png") no-repeat center center;
}

.sprite {
    background: url("../assets/imgs/gold.png") center center;
}

.item1 {
    background-position: -18px 17px;
}

.item2 {
    background-position: -230px 17px;
}

.item3 {
    background-position: -444px 13px;
}

.item4 {
    background-position: -20px -147px;
}

.item5 {
    background-position: -227px -143px;
}

.item6 {
    background-position: -437px -153px;
}
</style>
